<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_客户端cookie存储</title>
  <!-- 
  在JavaScript中，客户端Cookie的存储和管理是一个重要的主题。
  1. 什么是Cookie？
  Cookie是由服务器发送到客户端（浏览器）的小块数据，主要用于存储在用户的计算机上。它们可以用于跟踪用户的会话、保存用户的偏好设置等。

  2. Cookie的基本结构
  Cookie通常由以下几个部分组成：
  - 名称: Cookie的名称。
  - 值: Cookie的值。
  - 过期时间: Cookie的有效期，超出这个时间后，Cookie将被浏览器删除。
  - 路径: 指定Cookie的有效路径，只有在该路径下的请求才会发送该Cookie。
  - 域: 指定Cookie的有效域名，只有在该域名下的请求才会发送该Cookie。
  - 安全标志: 如果设置了这个标志，Cookie只会通过HTTPS协议发送。

  3. Cookie的存储方式
  - 浏览器存储: Cookie会被浏览器存储在用户的计算机上，通常可以通过浏览器的开发者工具查看和管理。
  - HTTP请求和响应: 当浏览器向服务器发送请求时，存储的Cookie会自动附加到请求头中。服务器可以通过设置 `Set-Cookie` 响应头来创建或更新Cookie。

  4. Cookie的使用场景
  - 会话管理: 用于保持用户的登录状态，跟踪用户的会话。
  - 用户偏好设置: 存储用户的个性化设置，如语言选择、主题等。
  - 跟踪和分析: 用于分析用户行为，进行广告投放和市场研究。

  5. Cookie的注意事项
  - 大小限制: 每个Cookie的大小通常限制在4KB左右，且每个域名下的Cookie数量也有限制（通常为20个左右）。
  - 安全性: Cookie可能会被恶意网站窃取，因此在存储敏感信息时要谨慎。可以使用 `HttpOnly` 和 `Secure` 标志来提高安全性。
  - 隐私: 由于Cookie可以用于用户跟踪，因此在使用时要遵循相关的隐私政策和法律法规。

  6. 在JavaScript中操作Cookie
  在JavaScript中，可以使用 `document.cookie` 来设置和获取Cookie。以下是一个简单的示例：
  // 设置Cookie
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

  // 获取Cookie
  const cookies = document.cookie.split('; ').reduce((prev, current) => {
      const [name, value] = current.split('=');
      prev[name] = value;
      return prev;
  }, {});

  console.log(cookies);
  -->
</head>

<body>

  <h3>客户端网站</h3>

  <button>设置cookie</button>

  <script>
    const btnEl = document.querySelector('button')

    btnEl.onclick = function () {
      // 在浏览器中通过js设置cookie(在开发中很少使用)
      // 没有设置max-age时, 是一个内存cookie, 浏览器关闭时会消失
      // 设置max-age时, 是一个硬盘cookie, 只能等到过期时间到达的时候, 才会销毁
      document.cookie = 'username=zs; max-age=10' // 10s后过期
      document.cookie = 'age=18; max-age=10' // 10s后过期
    }

  </script>

</body>

</html>